Yuklanishni Muvofiqlashtirish uchun React experimental_SuspenseList-ni O'zlashtirish

Front-end dasturlashning doimiy rivojlanib borayotgan sohasida uzluksiz va samarali foydalanuvchi tajribasini yaratish juda muhimdir. React'ning experimental_SuspenseList API asinxron kontentning yuklanishini boshqarish uchun kuchli mexanizmni taklif etadi, bu esa yanada silliq va intuitiv foydalanuvchi interfeysiga sezilarli hissa qo'shadi. Ushbu keng qamrovli qo'llanma SuspenseList'ning funksionalligi va eng yaxshi amaliyotlarini chuqur o'rganadi, bu sizga kontentni silliq yuklaydigan va ko'plab zamonaviy veb-ilovalarga xos bo'lgan "jank" (keskinlik)dan qochadigan ilovalarni yaratish imkonini beradi.

Asinxron Yuklanishning Qiyinchiliklarini Tushunish

SuspenseList'ga sho'ng'ishdan oldin, React'da asinxron yuklanishni boshqarishning umumiy qiyinchiliklarini tushunish juda muhim. Tashqi manbalardan ma'lumotlarni olishda yoki murakkab komponentlarni yuklashda, yuklanish holati oldindan aytib bo'lmaydigan bo'lishi va bir nechta foydalanish muammolariga olib kelishi mumkin:

• Miltillovchi UI: Komponentlar keskin paydo bo'lishi mumkin, bu ma'lumotlar mavjud bo'lganda vizual uzilishlarni keltirib chiqaradi. Bu, ayniqsa, yuklanish va yuklangan holatlar o'rtasida o'tishda seziladi.
• Yomon Foydalanuvchi Tajribasi: Sahifaning turli qismlari mustaqil ravishda yuklanganda chalkash UI tartibsiz va professional bo'lmagan ko'rinishi mumkin. Foydalanuvchilar ilovani sekin yoki ishonchsiz deb qabul qilishlari mumkin.
• Muvofiqlashtirilmagan Yuklanish Ketma-ketligi: Ehtiyotkorlik bilan boshqarilmasa, kontentning yuklanish tartibi foydalanuvchining kutganlariga mos kelmasligi mumkin. Bu chalkash va hafsalani pir qiluvchi tajribaga olib kelishi mumkin.

Oddiy elektron tijorat ilovasini ko'rib chiqing, unda mahsulotlar ro'yxati, sharhlar va tegishli mahsulotlar turli API nuqtalaridan olinadi. To'g'ri muvofiqlashtirishsiz, bu elementlar xaotik tarzda yuklanishi mumkin, bu esa foydalanuvchining kontentni tezda ko'zdan kechirishi va u bilan o'zaro aloqada bo'lishiga to'sqinlik qiladi.

React experimental_SuspenseList bilan tanishuv

React'ning experimental_SuspenseList dasturchilarga kontent mavjud bo'lganda uning tartibi va ko'rinishini nazorat qilish imkonini berib, bu muammolarga yechim taklif qiladi. U asosan yuklanish holatlarini boshqarish uchun React Suspense'dan foydalanadigan komponentlar atrofida o'ram vazifasini bajaradi. SuspenseList sizga bu to'xtatilgan komponentlarning foydalanuvchiga qanday namoyon bo'lishini nozik nazorat qilish imkonini beradi.

SuspenseList'ning asosiy funksionalligi uchta asosiy xususiyat atrofida jamlangan:

• revealOrder: Bu xususiyat to'xtatilgan komponentlarning qaysi tartibda ko'rinishini belgilaydi. U uchta qiymatdan birini qabul qiladi:
• 'together': Barcha komponentlar tayyor bo'lgach, bir vaqtning o'zida ko'rinadi.
• 'forwards': Komponentlar e'lon qilingan tartibda, birinchi komponentdan boshlab, o'z-o'zidan namoyon bo'ladi.
• 'backwards': Komponentlar e'lon qilingan teskari tartibda, oxirgi komponentdan boshlab, o'z-o'zidan namoyon bo'ladi.
• tail: Bu xususiyat komponentlar hali yuklanayotganda yuklanish holati qanday ko'rsatilishini nazorat qiladi. U ikkita qiymatdan birini qabul qiladi:
• 'collapsed': Barcha bolalar yuklanmaguncha zaxira kontentni ko'rsatadi.
• 'hidden': Barcha bolalar yuklanmaguncha zaxira kontentni yashiradi.
• children: To'xtatib turiladigan komponentlar.

Amaliy Qo'llash: Qadamma-qadam Qo'llanma

Keling, SuspenseList'dan foydalanishni amaliy misol bilan ko'rib chiqamiz. Biz turli blog postlari uchun ma'lumotlarni oladigan va ularni sahifada ko'rsatadigan oddiy ilova yaratamiz. Biz bu postlarning yuklanishini silliq boshqarish uchun Suspense va SuspenseList'dan foydalanamiz.

1. Komponentlarni Sozlash

Birinchidan, blog postini ifodalash uchun asosiy komponent yaratamiz. Ushbu komponent ma'lumotlarni olishni simulyatsiya qiladi va ma'lumotlar mavjud bo'lguncha to'xtatib turiladi:

            import React, { Suspense, useState, useEffect } from 'react';

function BlogPost({ id }) {
  const [post, setPost] = useState(null);

  useEffect(() => {
    // API'dan ma'lumotlarni olishni simulyatsiya qilish
    const fetchData = async () => {
      await new Promise(resolve => setTimeout(resolve, 1000 * Math.random())); // Tasodifiy yuklanish vaqtini simulyatsiya qilish
      setPost({ id, title: `Blog Post ${id}`, content: `Bu blog posti ${id} ning mazmuni.` });
    };

    fetchData();
  }, [id]);

  if (!post) {
    throw new Promise(resolve => setTimeout(resolve, 500)); // Uzoqroq dastlabki yuklanish vaqtini simulyatsiya qilish
  }

  return (
    

      
{post.title}
      
{post.content}
    
  );
}

            

              
                Copy
              
            
          

Ushbu `BlogPost` komponentida biz ma'lumotlarni olishni simulyatsiya qilish uchun `useEffect` hookidan foydalanamiz. Ma'lumotlar hali mavjud bo'lmaganda, biz yuklanish holatini simulyatsiya qiluvchi `Promise`ni tashlaymiz. React Suspense buni ushlaydi va `Suspense` komponentida ko'rsatilgan zaxira UI'ni render qiladi.

2. Suspense va SuspenseList'ni Amalga Oshirish

Endi, blog postlarini render qilish uchun `Suspense` va `SuspenseList` dan foydalanadigan asosiy komponentni yaratamiz:

            import React, { Suspense, SuspenseList } from 'react';

function App() {
  return (
    

      
Blog Postlari
      
        1-Post yuklanmoqda...
}>
          
        
        2-Post yuklanmoqda...